<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-10 14:09:12
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-10 14:22:49
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div{
            width: 500px;
            height: 500px;
            background-color: orange;
        }

    </style>
</head>
<body>
    <div></div>
    <button>解绑</button>
    <script>
        // dom0级 
        // 事件源.on事件类型 = 事件处理函数
        // 解绑语法 
        // 事件源.on事件类型 = null;


        // dom2级别 

        // w3c浏览器 
        
        // 事件源.addEventListener('事件类型','事件处理函数')
        // 事件源.removeEventListener('事件类型','要解绑的处理函数')

        // IE浏览器  

        // 事件源.detachEvent('on事件类型',要解绑的事件处理函数);

        // 注意事项
        
        
        // DOM2级别 绑定和解绑的时候 要把函数单独写出来 
        // 以函数名的方式进行解绑和绑定  




        var divEle = document.querySelector('div');
        var btn = document.querySelector('button');

        // btn.onclick = function(){
        //     console.log('被绑定了')
        // }

        // btn.onclick = null;


        function test(){
            alert('我是dom2')
        }


        btn.addEventListener('click',test); //不要加小括号
        btn.addEventListener('click',function(){alert('我也是')}); 
        btn.removeEventListener('click',test); // test方法不再执行
        btn.removeEventListener('click',function(){alert('我也是')}); // 这种方式不能解绑
        // 对上面绑定的没有任何影响 

        //绑定和解绑的时候 要把函数单独写出来 
        // 只传递函数名 就好了 
    </script>
</body>
</html>